<template>
	<view class="yp" id="y_page" @touchstart="INDEX_TOUCH.yp_touchstart" @touchmove="INDEX_TOUCH.yp_touchmove" @touchend="INDEX_TOUCH.yp_touchend">
		<!-- 自定义加载块 -->
		<view class="loadBlock" :class='{transition:isTransition}' id="y_loadBlock" :style="{padding:loadBlockPadding,marginTop:loadBlockMarginTop}">
			<text style="margin-right: 20rpx;" class="cuIcon-loading" :class="{animationRotate:isLoading}"></text>
			<text>{{this.loadText}}</text>
		</view>
		<slot></slot>
	</view>
</template>


<script module="INDEX_TOUCH" lang="renderjs">
	// renderjs		是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。
	export default {
		data() {
			return {
				pages: null, // 整个页面的实例
				loadBlock: null, // 下拉刷新区域实例,
				StartY: 0, // 触摸开始距离
				StartX: 0, // 触摸开始距离
				ableDownPull: false // 是否能下拉刷新 (要到达scrollTop===0才可触发)，
				
			}
		},
		mounted() {
			this.pages = document.querySelector('#y_page')
			this.loadBlock = document.querySelector('#y_loadBlock')
			this.$ownerInstance.callMethod('y_init', {
				offsetHeight: this.loadBlock.offsetHeight
			})
		},
		methods: {
			// touchstart
			yp_touchstart(e, ownerInstance) {
				if (this.pages.scrollTop <= 0) {
					this.ableDownPull = true
				}
				this.StartY = e.touches[0].clientY
				this.StartX = e.touches[0].clientX
			},
			// touchmove
			yp_touchmove(e, ownerInstance) {
				if (!this.ableDownPull) return
				ownerInstance.callMethod('onTouchMove', {
					event: e.touches[0],
					MoveDistance: [e.touches[0].clientX - this.StartX, e.touches[0].clientY - this.StartY],
					ScoTop: this.pages.scrollTop
				})
			},
			// touchend
			yp_touchend(e, ownerInstance) {
				this.ableDownPull = false
				this.StartY = 0
				ownerInstance.callMethod('onTouchEnd', {
					offsetHeight: this.loadBlock.offsetHeight,
					ScoTop: this.pages.scrollTop
				})
			}
		}
	}
</script>
<script>
	// let X_OR_Y_MOVE = null; // 上下滑动huo左右滑动
	export default {
		props: {
			loadTextList: {
				type: Array,
				default: function() {
					return ['下拉刷新!', "释放我，让我刷新!", '疯狂的加载中!', "已为您刷新啦!"]
				}
			}
		},
		data() {
			return {
				loadBlockHeight: "0", // 下拉刷新区域的高度
				loadBlockMarginTop: "0", // 下拉刷新区域的margintop
				loadBlockPadding: "0", // 下拉刷新区域的Padding,
				loadText: this.loadTextList[0], // 下拉刷新区域的文字
				isLoading: false ,// 是否加载中
				isTransition: false // 是否触发动画
			}
		},
		methods: {
			y_init(options) {
				this.loadBlockHeight = options.offsetHeight
				this.loadBlockMarginTop = -options.offsetHeight + 'px'
				this.loadBlockPadding = -options.offsetHeight + 'px'
			},

			// 监听touchmove改变
			onTouchMove(options) {
				let {
					ScoTop,
					event,
					MoveDistance
				} = options
				if (ScoTop > 0) return // 防止上滑过快触发下拉刷新
				if (this.isLoading) return // 下拉刷新中 禁止操作
				// if (X_OR_Y_MOVE === '上下滑动'){


				// console.log(this.loadBlockHeight - MoveDistance / 10)
				if (MoveDistance[1] >= 220) {
					this.loadText = this.loadTextList[1]
				} else {
					this.loadText = this.loadTextList[0]
				}
				this.loadBlockPadding = `${ - this.loadBlockHeight + MoveDistance[1]/5}px`
				this.loadBlockMarginTop = this.loadBlockMarginTop >= '0px' ? "0px" :
					`${ - this.loadBlockHeight + MoveDistance[1]/5}px`
				// console.log(event.clientY)
				// }


				// X_OR_Y_MOVE = Math.abs(MoveDistance[0]) > Math.abs(MoveDistance[1]) ? (X_OR_Y_MOVE = '左右滑动') : (X_OR_Y_MOVE = '上下滑动');
			},
			// 监听onTouchEnd改变
			async onTouchEnd(options) {
				if (options.ScoTop > 0) return // 防止上滑过快触发下拉刷新
				if (this.isLoading) return // 下拉刷新中 禁止操作


				// X_OR_Y_MOVE = null;
				if (this.loadText === this.loadTextList[1]) {
					this.isLoading = true
					this.loadText = this.loadTextList[2]
					this.isTransition = true
					this.$emit('onloadStart')
					
					// 接口内容
					// setTimeout(() => {
					// 	this.loadText = this.loadTextList[2]
					// 	uni.showToast({
					// 		icon:'none',
					// 		title:"刷新成功!"
					// 	})
					// 	this.isLoading = false
					// 	setTimeout(() => {
					// 		this.closeDownPullLoading()
					// 		this.$emit('onLoadOk',{msg:"刷新成功！",status:"ok"})
					// 	}, 1000)
					// }, 2000)

				} else if (this.loadText === this.loadTextList[0]) {
					this.isLoading = false
					this.loadBlockMarginTop = `${ - this.loadBlockHeight}px`
					this.loadBlockPadding = `0px`
					this.closeDownPullLoading()
				}
			},
			// 停止/关闭下拉刷新
			closeDownPullLoading() {
				this.loadBlockMarginTop = `${ - this.loadBlockHeight}px`
				this.loadBlockPadding = `0px`
				setTimeout(()=>{
					this.loadText = this.loadTextList[0]
					this.isTransition = false
					this.isLoading = false
				},400)
			}
		}
	}
</script>

<style scoped lang="less">
	.yp {
		// background-color: #3F536E;
		// height: 100vh;
		overflow: scroll;
	}

	.loadBlock {
		text-align: center;
	}

	// 是否旋转
	.animationRotate {
		display: inline-block;
		animation: rotate .8s infinite normal;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.transition {
		transition: all 0.6s;
	}

	image {
		width: 100%;
	}
</style>
